<!DOCTYPE html>
<html>
<head>
	<title>书签同步工具</title>
	<meta charset="utf-8" />
    <!--<link href="js/msgbox/custom.popup-v1.3.5.css"/>-->
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.main{
			width: 220px;
			max-height: 500px;
			overflow-x: hidden;
			overflow-y: auto;
			background-color: white;
		}
		.top{
			cursor: pointer;
    		background-color: #f6f2ff;
		}
		.top .left{
			display: inline-block;
			padding-left: 3px;
    		width: 64px;
    		height: 64px;
		}
		.top .right{
			display: inline-block;
		    padding-top: 8px;
		    vertical-align: top;
		}
		.top span{ 
			display: block;
		    font-size: 12px;
		    font-style: italic;
		    color: darkturquoise;
		}
		.user{
			background-color: #cee8f5e6;
		}
		
		#name{
			display: inline-block;
			width: 135px;
			height: 35px;
			line-height: 35px;
			text-align: center;
		}
		#transUserBtn{
			display: inline-block;
		 	cursor: pointer;
		    text-align: center;
		    width: 60px;
		    border: 1px solid #949a96;
		    border-radius: 5px;
		}
        #loading{
            width: 75px;
            height: 40px;
            margin: 0 auto;
        }
        #loading img{
            height: 32px;
        }
		#div1{
		    color: #fff2f2;
		    background-color: #ff8d3b;
		    height: 30px;
		    line-height: 30px;
		    text-align: center;
		    font-size: 16px;
		}
        #div2{
            width: 160px;
    		margin: 0 auto;
		}
        #div2 img{
            cursor: pointer;
            width: 25px;
            height: 25px;
            position: relative;
            top: 8px;
            left: 15px;
            transition: all .4s ease-in .1ms;
        }
        #div2 img:hover{
            transform:rotate(360deg);
            -webkit-transform:rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
        }
        #div2 .btn{
			cursor: pointer;
		    width: 120px;
    		height: 30px; 
    		margin: 2px auto; 
    		border-radius: 5px;
    		border: none;
		}
        #div2 .btn{
			background-color: #8fd6ff;
		}
		.btn:hover{
			opacity: 0.5;
		}
	</style>
</head>
<body>
	<div class="main">
		<div class="top">
			<div class="left">
				<img src="images/logo.png"/>
			</div>
			<div class="right">
				<h4>书签同步工具</h4>
				<span>https://gitee.com/fenmirs</span>
				<span>9926641@qq.com</span>
			</div>
		</div>
		<div id="userDiv" class="user">
			<div id="name">happy baby</div>
			<div id="transUserBtn">切换用户</div>
		</div>
		<div id="div1">请先登录!</div>
		<div id="div2">
			<button id="dataBtn" class="btn down">同步</button>
            <img id="forceData" src="images/localForce.png"/>
		</div>
        <div id="loading"><img src="images/loading.gif"/></div>
	</div>
</body>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<!--<script type="text/javascript" src="js/msgbox/jquery.custom.popup-v1.3.5.min.js"></script>-->
<script type="text/javascript" src="js/popup.js"></script>
</html>